<template>
  <div class="login">
    <div class="loginContent">
      <div class="login-layout">
       <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
        >
        <p>{{ u.aa }}</p>
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username" placeholder="请输入用户名"> 用户名</el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password"  v-model="ruleForm.password" placeholder="请输入密码"> 密码</el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="submitForm(ruleFormRef)">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import {useRouter} from "vue-router"
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
import { useUserStore } from "../stores/users";
import { useUserStore as aaa } from "@stores/users.ts";
import type {RuleForm} from "../api/type.ts"
import {login} from "@/api/index.ts"

import { setToken } from "@/api/auth";
const router=useRouter();

const u = useUserStore();

const formSize = ref<ComponentSize>("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  username: "",
  password: "",
});


const rules = reactive<FormRules<RuleForm>>({
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 1, max: 10, message: "长度必须在1到10位之间", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 1, max: 10, message: "长度必须在1到10位之间", trigger: "blur" },
  ],

});
//原始的先注释掉
/*const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};*/

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));

//登录提交数据
const submitForm=(formEl:FormInstance|undefined)=>{
  if(!formEl){
    return;
  }
  //验证
  formEl.validate(async(valid)=>{
    if(valid){
      console.log("ok");
      //发送请求
      let res= await login(ruleForm);
      if(res.data && res.data.code && res.data.code===200){
        debugger;
        let {token} =res.data.data;//服务端返回token
        setToken(token);
        router.push('/home')
      }else{
        alert(res.data.msg);
      }

    }else{
      console.log("error");
     
    }

  })

}



</script>

<style scoped>

.login {
  height: 100vw;
  width:  100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('../assets/gulangyu.jpg');
  background-size: cover;
  background-position: center;
  background-repeat:repeat;
 
}
.loginContent{
   height: 100vh;
    text-align: center;
    color: wheat;
    padding: 20px;
    background: rgba(0red, 0, 0, 0.5);
    overflow: hidden;
   
  }
.el-container{
  margin: 0 !important;
  padding: 0!important;
}
body,html {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
